<template>
    <div class="home">
        <img :src="getLangbanner1" alt="" />
        <img class="content1" :src="getLangcontent1" alt="" />
        <div class="relative">
            <img src="./img/banner2.png" alt="" />
            <div class="banner2">
                <div>
                    <div class="head">{{ $t("banner2.head") }}</div>
                    <p class="content">
                        {{ $t(`banner2.tabDes[${isHeadActive}]`) }}
                    </p>
                    <div class="tab-head head">
                        {{ $t(`banner2.tabHead[${isHeadActive}]`) }}
                    </div>
                    <div class="img-tab">
                        <div v-for="(item, i) in banner2ImgTabArr" :key="i" @click="tabHandle(i)">
                            <img :src="isHeadActive === i ? banner2ImgTabArrActive[i] : item" />
                            <transition name="fade">
                                <div v-show="isHeadActive === i" :class="isHeadActive === i && 'active-line'"></div>
                            </transition>
                        </div>
                    </div>
                </div>
                <img
                    v-for="(item, i) in banner2ImgTabArr"
                    :key="i"
                    v-show="isHeadActive === i"
                    class="animated fadeInRight"
                    :src="banner2ImgArr[isHeadActive]"
                    alt=""
                />
            </div>
        </div>
        <img :src="getLangcontent2" alt="" />
        <div class="banner3">
            <img :src="getLangbanner3" alt="" />
            <div class="center banner3-box">
                <div
                    :class="hoverIndex === i ? 'banner3-item banner3-item-hover' : 'banner3-item'"
                    v-for="(item, i) in banner3ImgArr"
                    :key="i"
                    @mouseenter="hoverIndex = i"
                >
                    <img :src="hoverIndex === i ? banner3ImgArrHover[i] : item" alt="" />
                    <span>{{ $t(`banner3[${i}].name`) }}</span>
                    <p>{{ $t(`banner3[${i}].des`) }}</p>
                </div>
            </div>
        </div>
        <img :src="getLangcontent3" :style="{ display: 'block' }" alt="" />
        <div class="banner4">
            <img :src="getLangbanner4" alt="" />
            <div>
                <img v-for="(item, i) in banner4Img" :key="i" :src="item" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isHeadActive: 0,
            hoverIndex: 1,
            banner2ImgTabArr: [
                require("./img/tab1.png"),
                require("./img/tab2.png"),
                require("./img/tab3.png"),
                require("./img/tab4.png"),
                require("./img/tab5.png")
            ],
            banner2ImgTabArrActive: [
                require("./img/tab1_active.png"),
                require("./img/tab2_active.png"),
                require("./img/tab3_active.png"),
                require("./img/tab4_active.png"),
                require("./img/tab5_active.png")
            ],
            banner2ImgArr: [
                require("./img/banner2_img1.png"),
                require("./img/banner2_img2.png"),
                require("./img/banner2_img3.png"),
                require("./img/banner2_img4.png"),
                require("./img/banner2_img5.png")
            ],
            banner3ImgArr: [require("./img/banner3_icon1.png"), require("./img/banner3_icon2.png"), require("./img/banner3_icon3.png")],
            banner3ImgArrHover: [require("./img/banner3_icon1_hover.png"), require("./img/banner3_icon2_hover.png"), require("./img/banner3_icon3_hover.png")],
            banner4Img: [
                require("./img/5ping-logo1.png"),
                require("./img/5ping-logo2.png"),
                require("./img/5ping-logo3.png"),
                require("./img/5ping-logo4.png"),
                require("./img/5ping-logo5.png"),
                require("./img/5ping-logo6.png"),
                require("./img/5ping-logo7.png"),
                require("./img/5ping-logo8.png"),
                require("./img/5ping-logo9.png"),
                require("./img/5ping-logo10.png"),
                require("./img/5ping-logo11.png"),
                require("./img/5ping-logo12.png")
            ]
        };
    },

    computed: {
        getLangbanner1() {
            const imgs = [require("./img/zh_banner1.png"), require("./img/en_banner1.png")];
            return imgs[this.$t("callBackImg")];
        },
        getLangbanner3() {
            const imgs = [require("./img/zh_banner3.png"), require("./img/en_banner3.png")];
            return imgs[this.$t("callBackImg")];
        },
        getLangbanner4() {
            const imgs = [require("./img/zh_banner4.png"), require("./img/en_banner4.png")];
            return imgs[this.$t("callBackImg")];
        },
        getLangcontent1() {
            const imgs = [require("./img/zh_content1.png"), require("./img/en_content1.png")];
            return imgs[this.$t("callBackImg")];
        },
        getLangcontent2() {
            const imgs = [require("./img/zh_content2.png"), require("./img/en_content2.png")];
            return imgs[this.$t("callBackImg")];
        },
        getLangcontent3() {
            const imgs = [require("./img/zh_content3.png"), require("./img/en_content3.png")];
            return imgs[this.$t("callBackImg")];
        }
    },

    methods: {
        tabHandle(i) {
            this.isHeadActive = i;
        }
    }
};
</script>

<style lang="less" scoped>
.home {
    width: 100%;
    padding-top: 80px;
    > img {
        width: 100%;
    }
    .active-line {
        width: 40px;
        height: 8px;
        border-radius: 4px;
        background-color: #0efffc;
        position: absolute;
        bottom: 0;
    }
    .banner2 {
        position: absolute;
        display: flex;
        justify-content: space-between;
        padding: 181px 0 0 359px;
        z-index: 100;
        left: 0;
        top: 0;
        color: #fff;
        text-align: left;
        .head {
            font-size: 47px;
            font-weight: bold;
        }
        .content {
            font-size: 23px;
            line-height: 1.54;
            margin-top: 74px;
            width: 600px;
            min-height: 140px;
        }

        .tab-head {
            margin-top: 35px;
        }

        .img-tab {
            position: relative;
            left: -24px;
            display: flex;
            align-items: center;
            width: 450px;
            margin-top: 40px;
            > div {
                cursor: pointer;
                img {
                    margin-bottom: 18px;
                }
                .center();
            }
        }
    }

    .banner3 {
        position: relative;
        > img {
            width: 100%;
        }
        .banner3-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            & div:nth-of-type(2) {
                margin-right: 40px;
                margin-left: 40px;
            }
            margin-top: 46px;
        }

        .banner3-item {
            width: 300px;
            height: 450px;
            background-color: rgba(0, 0, 0, 0.5);
            .center();
            flex-direction: column;
            img {
                width: 75px;
                height: 75px;
            }
            span {
                font-size: 24px;
                margin-top: 23px;
                color: #fff;
                transition: all 0.5s;
            }
            p {
                font-size: 18px;
                margin-top: 69px;
                color: #727272;
                width: 233px;
                line-height: 1.33;
                transition: all 0.5s;
            }
            transition: all 0.5s;
        }
        .banner3-item-hover {
            width: 333px;
            height: 500px;
            span {
                color: @primary_color;
            }
            p {
                color: #fff;
            }
        }
    }
    .content1,
    .content1 {
        position: relative;
        top: 3px;
    }
    .banner4 {
        position: relative;
        top: -2px;
        > img {
            display: block;
            width: 100%;
        }
        position: relative;
        > div {
            position: absolute;
            width: 1200px;
            .center();
            flex-wrap: wrap;
            justify-content: space-between;
            z-index: 100;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 47px;
            img {
                margin-bottom: 27px;
                width: 272px;
            }
        }
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s, width 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    width: 0;
}
</style>
